import ChatLog from "./chatlog"
import Other from "./other"
import store from '../../store'
import { Fragment } from "react"

const ChatContainer = () => {
    // 获取redux中的状态
    let {states,nickname} = store.getState()
    let handleChangeName = () => {
        store.dispatch({type:'CHANGE_NAME',payload:'混元太极'})
    }
    // 点击退出/登入按钮
    let handleChange = () => {
        store.dispatch({type:'CHANGE_STATES'})
    }
    // 使用元素变量声明结构
    let el = (
        <Fragment>
            <h1>用户名:{nickname}</h1>
            <button onClick={handleChangeName}>点击改变用户名</button>
            <ChatLog/>
            <Other/>
        </Fragment>
    )
    return(
        <fieldset>
            <legend>聊天室</legend>
            <button onClick={handleChange}>点击退出/登入</button>
            {states?el:null}
        </fieldset>
    )
}
export default ChatContainer